<template>
	<div id="line-info_container">
		<el-form label-width="100px">
			<el-form-item label="线路编码:">
				<el-input v-model="psLineInfo.linecode" @blur="getPoleForThis" placeholder="请输入线路编码"></el-input>
			</el-form-item>
			<el-form-item label="线路名称:">
				<el-input v-model="psLineInfo.linename" placeholder="请输入线路名称"></el-input>
			</el-form-item>
			<el-form-item label="线路长度:">
				<el-input v-model="psLineInfo.linelength" placeholder="请输入线路长度"></el-input>
			</el-form-item>
			<el-form-item label="回路长度:">
				<el-input v-model="psLineInfo.backlength" placeholder="请输入回路长度"></el-input>
			</el-form-item>
			<el-form-item label="投运日期:">
				<el-date-picker v-model="psLineInfo.productdate" type="date"></el-date-picker>
			</el-form-item>
			<el-form-item label="电压等级:">
				<el-input v-model="psLineInfo.voltagelevel" placeholder="请输入电压等级"></el-input>
			</el-form-item>
			<el-form-item label="起始杆号:">
				<el-select v-model="psLineInfo.startpole" @change="handlerStartChange">
					<el-option label="--请选择--" value="-1"></el-option>
					<el-option v-for="p in startPoleList" :label="p.polecode" :value="p.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="终止杆号:">
				<el-select v-model="psLineInfo.endpole" @change="handlerEndChange">
					<el-option label="--请选择--" value="-1"></el-option>
					<el-option v-for="p in endPoleList" :label="p.polecode" :value="p.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="塔基数:">
				<el-input v-model="psLineInfo.towerbasenum" placeholder="请输入塔基数"></el-input>
			</el-form-item>
			<el-form-item label="备注:">
				<el-input v-model="psLineInfo.common" placeholder="请输入备注" type="textarea"></el-input>
			</el-form-item>
			<el-form-item label="是否启用:">
				<el-radio-group v-model="psLineInfo.isstart">
					<el-radio label="1">启用</el-radio>
					<el-radio label="0">停用</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="save">保存</el-button>
				<el-button type="warning" @click="$router.push('/psLineInfo')">返回</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
	import {
		queryStartPloeAndEndPole,
		addLineInfo,getPoleCodePrefix
	} from '../../config/request.js'
	export default {
		data() {
			return {
				psLineInfo: {
					linecode: '',
					linename: '',
					linelength: '',
					backlength: '',
					productdate: '',
					voltagelevel: '',
					startpole: '-1',
					startpolecode: '',
					endpole: '-1',
					endpolecode: '',
					towerbasenum: '',
					common: '',
					isstart: '1'
				},
				psPoleInfoList: [],
				startPoleList:[],
				endPoleList:[]
			};
		},
		computed: {
			formatedDate() {
				const date = new Date(this.psLineInfo.productdate);
				const year = date.getFullYear();
				const month = (date.getMonth() + 1).toString().padStart(2, 0);
				const day = date.getDate().toString().padStart(2, 0);
				const hours = date.getHours().toString().padStart(2, '0');
				const minutes = date.getMinutes().toString().padStart(2, '0');
				const seconds = date.getSeconds().toString().padStart(2, '0');
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			}
		},
		methods: {
			loadPole() {
				queryStartPloeAndEndPole().then(res => {
					this.psPoleInfoList = res.data.psPoleInfos;
				})
			},
			save() {
				this.psLineInfo.productdate = this.formatedDate;
				addLineInfo(this.psLineInfo).then(res => {
					if(res.code === 200){
						this.$message.success('添加成功!');
					}
				}).catch(err => {
					alert("添加出错!" + err);
				})
			},
			handlerEndChange(event) {
				for (let i = 0; i < this.psPoleInfoList.length; i++) {
					if (event === this.psPoleInfoList[i].id) {
						this.psLineInfo.endpolecode = this.psPoleInfoList[i].polecode;
						break;
					}
				}
			},
			handlerStartChange(event) {
				for (let i = 0; i < this.psPoleInfoList.length; i++) {
					if (event === this.psPoleInfoList[i].id) {
						this.psLineInfo.startpolecode = this.psPoleInfoList[i].polecode;
						break;
					}
				}
			},getPoleForThis(){
				this.psLineInfo.startpole = '-1';
				this.psLineInfo.endpole = '-1';
				this.startPoleList = [];
				this.endPoleList = [];
				if(!this.psLineInfo.linecode){
					return;
				}
				getPoleCodePrefix(this.psLineInfo).then(res=>{
					if(res.code === 200){
						if(res.data.psPoleInfoList != ''){
							this.psPoleInfoList = res.data.psPoleInfoList;
							let midIndex = Math.ceil(this.psPoleInfoList.length / 2);
							let startTower = this.psPoleInfoList.slice(0,midIndex);
							let endTower = this.psPoleInfoList.slice(midIndex);
							this.startPoleList = startTower;
							this.endPoleList = endTower;
							this.$message.info('成功获取到对应杆塔!');
						}else{
							this.$message.warning('没有获取到对应杆塔！');
						}
					}else{
						this.$message.error('获取失败！');
					}
				}).catch(err=>{
					this.$notify.error({
						title:'请求出错',
						message:err,
						duration:1500
					})
				})
			}
		},
		mounted() {
			this.loadPole();
		}
	};
</script>

<style scoped>
	#line-info_container {
		max-width: 600px;
		margin: 0 auto;
	}

	.el-form-item__label {
		font-weight: bold;
	}

	.el-input {
		width: 100%;
	}

	.el-select {
		width: 100%;
	}

	.el-radio-group {
		display: flex;
	}

	.el-radio {
		margin-right: 20px;
	}
</style>